<template>
	<div class="city top-page">
		<div class="top">
			<van-search
				v-model="searchValue"
				placeholder="城市/区域/位置"
				shape="round"
				show-action
				@cancel="cancelClick"
			/>

			<van-tabs v-model:active="tabActive" color="#ff9854" line-height="2">
				<template v-for="(val, key, index) in allCities" :key="key">
					<!-- name: 标签名称，作为匹配的标识符(修改tabActive绑定的值) -->
					<van-tab :title="val.title" :name="key"></van-tab>
				</template>
			</van-tabs>
		</div>

		<div class="content">
			<!-- 切换的太慢, 使用v-show实现 -->
			<!-- <city-group :groupData="currentGroup"></city-group> -->
			<template v-for="(val, key, index) in allCities" :key="index">
				<city-group :groupData="val" v-show="tabActive === key"></city-group>
			</template>
		</div>
	</div>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import hyRequest from '@/services/request'
	import useCityStore from '@/stores/modules/city.js'
	import { storeToRefs } from 'pinia'
	import CityGroup from './cpns/city-group.vue'

	const router = useRouter()
	const cityStore = useCityStore()
	const searchValue = ref('')
	// 搜索框取消
	const cancelClick = () => {
		router.back()
	}

	// tab
	const tabActive = ref()

	// 从store中获取数据
	cityStore.fetchAllCitiesData()
	const { allCities } = storeToRefs(cityStore)

	// 获取选中后的变量
	const currentGroup = computed(() => allCities.value[tabActive.value])
</script>

<style lang="less" scoped>
	.city {
		// --van-tabs-line-height: 30px;
		// top固定定位实现(缺点: 滚动条位置不对)
		/* .top {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		.content {
			margin-top: 98px;
		} */

		// 局部滚动
		.content {
			height: calc(100vh - 98px);
			overflow-y: auto;
		}
	}
</style>
